import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  TextInput,
} from 'react-native';
import { colors, sizes } from 'bee/themes';
import { px2dp } from 'bee/utils';
import { Languages } from 'bee/constants/Languages';

// @flow
type Props = {
  value: string,
  sendCode: Function,
};

class AuthCode extends React.Component<Props> {
  render() {
    const { value, sendCode } = this.props;
    return (
      <View>
        <Text style={styles.pleaseEnter}>{Languages.enterAuthCode}</Text>
        <View style={styles.inputView}>
          <TextInput
            value={value}
            placeholder={Languages.pleaseEnter}
            style={styles.input}
            underlineColorAndroid="transparent"
            placeholderTextColor={colors[1103]}
          />
          <TouchableOpacity style={styles.touchable} onPress={sendCode}>
            <Text style={styles.sendCode}>{Languages.sendAuthCode}</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  pleaseEnter: {
    fontSize: sizes.f1,
    color: colors[1103],
    marginLeft: px2dp(25),
    marginBottom: px2dp(10),
  },
  inputView: {
    flexDirection: 'row',
    width: px2dp(510),
    height: px2dp(66),
    alignItems: 'center',
    borderWidth: StyleSheet.hairLineWidth,
    // borderColor: colors[1104],
    borderColor: colors[1001],
  },
  input: {
    width: px2dp(224),
    padding: 0,
    backgroundColor: colors.white,
    paddingLeft: px2dp(29),
    height: '100%',
  },
  touchable: {
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  sendCode: {
    flex: 1,
    width: px2dp(286),
    textAlign: 'center',
    textAlignVertical: 'center',
    backgroundColor: '#ddd',
  },
});

export { AuthCode };
